import React from 'react'
import { history } from 'umi'
import { Button, Input, Row, Col, message } from 'antd'
import { UserOutlined } from '@ant-design/icons';
import './login.less'
import HTTP from '../services/api'
import apiurl from '../api/user.api';
export default class Login extends React.Component {
    constructor() {
        super()
        this.state = {
            nickname: '',
            password: ''
        }
    }
    userLogin = async () => {
        // 拿到用户的信息
        console.log(apiurl.userLogin)
        console.log('========================')
        const { nickname, password } = this.state
        console.log(nickname)
        console.log(password)
        //对信息进行校准
        if (!nickname) {
            message.error('您输入的用户名为空')
            return
        }
        if (!password) {
            message.error('您输入的密码为空')
            return
        }
        // 发送到后端服务器
        let result = await HTTP({ method: 'get' }, apiurl.userLogin, { nickname, password, type: 'worker' })
        if (result && result.status) {
            console.log(result)
            message.info(result.msg)
            localStorage.setItem('token', result.token)
            result.info && localStorage.setItem('userinfo',JSON.stringify(result.info))
            history.push('/')
        } else {
            message.error(result.msg)
        }
        // 是否登陆成功
    }
    render() {
        return (
            <div className='login_background'>
                <Row align='middle' justify='center' style={{ height: '40%', width: '100%' }} gutter={[16, 24]}>
                    <Col className="gutter-row" span={24}>
                        <div >
                            <Input style={{ width: '150' }} size="large" onChange={value => { this.setState({ nickname: value.target.value }) }} placeholder="用户的昵称" prefix={<UserOutlined />} />
                        </div>
                    </Col>
                    <Col className="gutter-row" span={24}>
                        <div >
                            <Input onChange={value => { this.setState({ password: value.target.value }); console.log(value.target.value) }} size="large" type='password' placeholder="用户的密码" prefix={<UserOutlined />} />
                        </div>
                    </Col>
                    <Col className="gutter-row" span={24}>
                        <Button type="primary" shape='round' onClick={() => { this.userLogin() }}>登陆</Button>
                    </Col>
                    <Col className="gutter-row" span={24}>
                        <Button type="primary" shape='round' onClick={() => { this.props.change() }}>我要去注册</Button>
                    </Col>
                </Row>
            </div>
        )
    }
}